import React, { Component } from 'react'
import { Route, Switch } from 'react-router-dom/cjs/react-router-dom.min'
import NowPlaying from './films/NowPlaying'
import ComingSoon from './films/ComingSoon'
import { Swiper, Toast, Tabs } from 'antd-mobile'

import style from './css/Film.module.css'

export default class Films extends Component {
    state = {
        list: ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac']
    }
    render() {
        return (
            <div className={style.film}>
                <Swiper autoplay={true}>
                    {
                        this.state.list.map((color, index) => (
                            <Swiper.Item key={index}>
                                <div
                                    style={{ background: color, height: '200px' }}
                                    onClick={() => {
                                        Toast.show(`你点击了卡片 ${index + 1}`)
                                    }}
                                >
                                    {index + 1}
                                </div>
                            </Swiper.Item>
                        ))
                    }
                </Swiper>
                <div style={{ position: "sticky", top: 0, background: "white" }}>
                    <Tabs onChange={(key) => {
                        this.props.history.push(key)
                    }} activeKey={this.props.location.pathname}>
                        <Tabs.Tab title='正在热映' key='/films/nowPlaying'>
                        </Tabs.Tab>
                        <Tabs.Tab title='即将上映' key='/films/comingSoon'>
                        </Tabs.Tab>
                    </Tabs>
                </div>
                <Switch>
                    <Route path="/films/nowPlaying" component={NowPlaying} />
                    <Route path="/films/comingSoon" component={ComingSoon} />
                </Switch>
            </div>
        )
    }
}
